iT邦幫忙

2021 iThome 鐵人賽

DAY 29
0
永豐金融APIs

釋放你的潛能用技能交易吧!系列 第 29

[Day29] 第二十九 - 補充技能交換前端以及與Express溝通api

  • 分享至 

  • xImage
  •  

前言

今天比較趕

我先貼code有空在補充摟

目標

  1. 練習blade layout
  2. 界街前後端 trade API(我們要變出一個交易的api服務)
  3. 從laravel界接

實作

@extends('layout')


@section('content')
<div>
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>技能ID</th>
        <th>自身ID</th>
        <th>對方使用者ID</th>
        <th>自己選擇的技能ID</th>
        <th>交換!!!</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>{{$skill_id}}</td>
        <td>{{$user_id}}</td>
        <td>{{$target_user_id}}</td>
        <td>
          <select name="" id="mySelect">
            @foreach ($myskills as $ss)
            <option value="{{ $ss['id'] }}">{{ $ss['title'] }}</option>
            </p>
            @endforeach
          </select>
        </td>
        <td><button onclick="check('{{$skill_id}}','{{$user_id}}','{{$target_user_id}}')">交換</button></td>
      </tr>
    </tbody>
  </table>
</div>
{{$myskills}}
<script>
  function check(skill_id, user_id, target_user_id) {
    var my_skill_id = $('#mySelect').val();

    var data = {
      my_skill_id,
      skill_id,
      user_id,
      target_user_id
    }
    $.ajax({
        method: "POST",
        url: "/trades",
        dataType: 'json',
        data
      })
      .done(function(msg) {
        console.log(msg)
      });
  }
</script>
@endsection

https://ithelp.ithome.com.tw/upload/images/20211014/20121052VTwZ5UEHG4.png


上一篇
[Day28] 第二十八章-查詢訂單api (express)
下一篇
[Day30] 第三十 - 總結技能交換系統(整合Laravel以及Express的Microservices)
系列文
釋放你的潛能用技能交易吧!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言